<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 30vh;
            background-color: red;
        }
        /* <div class="top-left">top-left</div>
            <div class="top-right">top-right</div>  
            <div class="top-center">top-center</div>
             */
        .top-left{
            width: 15%;
            background-color: rgb(218, 56, 56);
        }
        .top-center{
            flex: 1;
        }
        .top-right{
            width: 15%;
            background-color: rgb(218, 56, 56);
        }
   
        .top-center{
            display: flex;
            flex: 1;
            flex-direction: column;
        }
        .top-center-top{
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 50%;
            background-color: rgb(189, 184, 184);
        }
/* 
  <div class="top-center-search">search</div>
 <div class="top-center-user">user</div>

*/

        .top-center-search{
           flex: 1;
           display: flex;
           flex-direction: row;
        }
        .top-center-user{
            width: 10%;
            text-align: center;
            background-color: rgb(230, 174, 174);
        }


        .top-center-bottom{
            width: 100%;
            height: 50%;
            background-color: rgb(192, 126, 126);
        }

        .main {
            display: flex;
            width: 100%;
            height: 70vh;
            background-color: grey;
        }

        .left {
            display: flex;
            flex-direction: row;
            width: 15%;
            background-color: rgb(77, 76, 76);
        }
        .left-nav{
            width: 30%;
            background-color: rgb(218, 56, 56);
        }
        .left-main{
            width: 70%;
            background-color: rgb(235, 229, 229);
        }
        .center {
            flex: 1;
            justify-content: center;
            background-color: rgb(55, 0, 255);
        }
        .center-main{
            display: flex;
            justify-content: center;
            align-items: center;
        }
      
        .right {
            width: 15%;
            background-color: rgb(77, 76, 76);
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="top">top</div>
        <div class="top">
            <div class="top-left">top-left</div>
            <div class="top-center">
                <div class="top-center-top">
                    <div class="top-center-search">
                        <svg t="1725950465339" class="icon"  width="15%" height="70%"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2897"><path d="M412.45184 670.512128c141.384704 0 256-114.615296 256-256s-114.615296-256-256-256-256 114.615296-256 256 114.615296 256 256 256z m241.847296-57.46688l255.670272 255.670272c11.108352 11.108352 11.108352 29.118464 0 40.226816-11.107328 11.108352-29.11744 11.108352-40.225792 0L614.352896 653.551616c-54.493184 46.072832-124.9536 73.849856-201.901056 73.849856-172.803072 0-312.88832-140.085248-312.88832-312.889344S239.648768 101.623808 412.45184 101.623808c172.804096 0 312.889344 140.084224 312.889344 312.88832 0 75.37152-26.650624 144.519168-71.042048 198.53312z" fill="#333333" p-id="2898"></path></svg>
                        <input type="text" class="search">
                    </div>
                    <div class="top-center-user">
                        <!-- <svg t="1725950174247" class="icon" width="100%" height="70%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1562" ><path d="M704 329.152C704 209.365333 622.848 128 512 128s-192 81.365333-192 201.152C320 454.762667 407.146667 554.666667 512 554.666667s192-99.904 192-225.514667z m42.666667 0C746.666667 476.714667 642.176 597.333333 512 597.333333s-234.666667-120.618667-234.666667-268.181333C277.333333 181.546667 381.824 85.333333 512 85.333333s234.666667 96.213333 234.666667 243.818667zM512.106667 640c408.96 0 404.864 256.512 404.864 256.512 3.093333 23.274667-13.482667 42.154667-37.098667 42.154667H144.32c-23.573333 0-41.088-19.136-37.077333-42.154667 0 0-4.096-256.512 404.864-256.512zM149.909333 896l0.064 3.861333-0.704 3.968c0.682667-3.882667-2.837333-7.829333-4.949333-7.829333H879.872c-2.154667 0-5.504 3.818667-5.205333 6.144l-0.426667-3.157333 0.064-3.157334c0-0.853333-0.128-3.349333-0.533333-7.125333a161.813333 161.813333 0 0 0-4.266667-23.082667 192.96 192.96 0 0 0-35.242667-71.104C780.330667 725.461333 678.634667 682.666667 512.106667 682.666667c-166.549333 0-268.224 42.794667-322.176 111.850666a192.96 192.96 0 0 0-35.242667 71.104c-2.176 8.426667-3.541333 16.192-4.266667 23.082667a81.045333 81.045333 0 0 0-0.512 7.296z" fill="#3D3D3D" p-id="1563"></path></svg> -->
                        <svg t="1725950387161" class="icon" width="100%" height="70%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1895" ><path d="M582.656 418.304c-31.744 12.288-58.368 29.184-84.992 51.2-26.624 22.016-48.64 46.08-65.536 73.216-19.456 26.624-34.304 55.808-44.032 90.112-9.728 31.744-14.848 65.536-14.848 102.4 0 31.744 5.12 60.928 12.288 90.112 7.168 29.184 19.456 55.808 34.304 80.384h-24.576c-16.896 0-38.912 0-60.928-2.56-24.576 0-46.08-2.56-73.216-5.12L187.904 890.88c-24.576-2.56-46.08-5.12-65.536-9.728-19.456-2.56-36.352-5.12-51.2-9.728-14.848-2.56-22.016-5.12-26.624-9.728-7.168-5.12-12.288-19.456-14.848-44.032s-2.56-55.808 5.12-97.28c2.56-14.848 7.168-26.624 14.848-36.352s16.896-16.896 26.624-24.576 22.016-12.288 36.352-16.896c9.728-5.12 24.576-7.168 38.912-12.288 14.848-5.12 26.624-7.168 41.472-12.288 12.288-5.12 24.576-9.728 36.352-16.896 12.288-7.168 22.016-14.848 29.184-22.016 7.168-7.168 12.288-14.848 14.848-22.016s5.12-14.848 5.12-22.016v-26.624c0-14.848-5.12-24.576-14.848-34.304-7.168-7.168-16.896-16.896-29.184-24.576-7.168-5.12-12.288-9.728-14.848-16.896-5.12-7.168-7.168-14.848-9.728-22.016-2.56-9.728-7.168-19.456-9.728-29.184-5.12 0-7.168-2.56-12.288-7.168l-12.288-12.288c-5.12-5.12-7.168-12.288-9.728-24.576-2.56-9.728-5.12-19.456-2.56-26.624 0-7.168 2.56-16.896 5.12-22.016 2.56-7.168 7.168-12.288 12.288-19.456 0-22.016 0-46.08 2.56-68.096 0-22.016 5.12-41.472 12.288-63.488 5.12-22.016 14.848-41.472 29.184-58.368 12.288-16.896 24.576-31.744 38.912-41.472 14.848-9.728 29.184-19.456 44.032-24.576S336.896 3.584 351.744 1.024c14.336-1.024 28.672-1.024 43.52-1.024 16.896 0 34.304 2.56 51.2 5.12 16.896 5.12 34.304 9.728 48.64 14.848 14.848 7.168 29.184 14.848 41.472 22.016 12.288 7.168 22.016 16.896 26.624 24.576 14.848 19.456 26.624 41.472 34.304 63.488 7.168 24.576 12.288 46.08 14.848 65.536 2.56 24.576 5.12 48.64 5.12 73.216 5.12 2.56 7.168 7.168 9.728 12.288s5.12 9.728 5.12 16.896c2.56 7.168 2.56 14.848 0 24.576 0 12.288-5.12 24.576-7.168 31.744-5.12 7.168-7.168 14.848-12.288 16.896-5.12 5.12-12.288 7.168-16.896 9.728-2.56 5.12-2.56 7.168-2.56 12.288l-5.12 12.288c-3.072 3.072-3.072 8.192-5.632 12.8z m129.024 29.184c38.912 0 75.264 7.168 112.128 22.016 34.304 14.848 65.536 36.352 90.112 60.928 26.624 26.624 46.08 55.808 60.928 90.112 14.848 34.304 22.016 70.656 22.016 109.568s-7.168 75.264-22.016 109.568c-14.848 34.304-36.352 65.536-60.928 90.112-26.624 26.624-55.808 46.08-90.112 60.928-34.304 14.848-73.216 22.016-112.128 22.016s-77.824-7.168-112.128-22.016c-34.304-14.848-65.536-34.304-90.112-60.928-26.624-26.624-46.08-55.808-60.928-90.112-14.848-34.304-22.016-70.656-22.016-109.568s7.168-75.264 22.016-109.568c14.848-34.304 36.352-65.536 60.928-90.112 26.624-26.624 55.808-46.08 90.112-60.928 34.304-14.848 73.216-22.016 112.128-22.016z m167.424 228.864c2.56-12.288 2.56-22.016-5.12-34.304-7.168-9.728-16.896-16.896-26.624-22.016-12.288-5.12-22.016-5.12-34.304 0-12.288 2.56-19.456 12.288-24.576 29.184-2.56 9.728-5.12 19.456-9.728 29.184-2.56 9.728-5.12 19.456-7.168 26.624-2.56 9.728-5.12 19.456-9.728 31.744-5.12 12.288-9.728 24.576-14.848 38.912-5.12 14.848-14.848 22.016-26.624 22.016s-19.456-7.168-26.624-19.456-12.288-24.576-19.456-38.912c-5.12-14.848-12.288-26.624-16.896-41.472l-14.848-36.352c-5.12-9.728-7.168-19.456-9.728-26.624-5.12-9.728-12.288-14.848-24.576-16.896-12.288 0-22.016 0-31.744 5.12-9.728 5.12-19.456 12.288-26.624 22.016-7.168 9.728-7.168 19.456-2.56 31.744 5.12 14.848 9.728 26.624 14.848 41.472 5.12 14.848 12.288 31.744 16.896 46.08 5.12 14.848 12.288 31.744 16.896 46.08 5.12 14.848 9.728 29.184 14.848 38.912 9.728 22.016 22.016 38.912 41.472 51.2 19.456 12.288 38.912 16.896 58.368 16.896s38.912-5.12 58.368-14.848c19.456-9.728 31.744-24.576 41.472-44.032 7.168-16.896 14.848-31.744 19.456-48.64 7.168-16.896 14.848-34.304 19.456-51.2 7.168-16.896 12.288-31.744 16.896-46.08 5.632-12.288 8.192-24.576 12.8-36.352z" fill="#245098" p-id="1896"></path></svg>
                        <span > <a href="#">我 的</a></span>
                    </div>
                </div>
                <div class="top-center-bottom">
                    456
                </div>
            </div>
            <div class="top-right">top-right</div>  
        </div>
        <div class="main">
            <div class="left">
                <div class="left-nav">left-nav</div>
                <div class="left-main">left-main</div>
            </div>
            <div class="center">
                <div class="center-main">center-main</div>
            </div>
            <div class="right">right</div>
        </div>
    </div>
</body>

</html>